<!-- 知识库首页 -->
<template>
  <div class="home-container">
    <!-- 知识库列表区域 -->
    <section class="knowledge-section">
      <div class="section-header">
        <h2 class="section-title">知识库列表</h2>
        <button class="btn btn-primary" @click="handleCreateClick" style="margin-top: 10px;">
          <span class="icon">+</span>
          新建知识库
        </button>
      </div>
      
      <div class="knowledge-grid">
        <div 
          v-for="knowledge in knowledgeList" 
          :key="knowledge.id"
          class="knowledge-card"
          @click="openKnowledge(knowledge.id)"
        >
          <img src="/public/cover.png" :alt="knowledge.name" class="knowledge-cover" />
          <div class="knowledge-info">
            <h3 class="knowledge-name">{{ knowledge.name }}</h3>
            <p class="knowledge-stats">{{ knowledge.docs.length }} 个文档</p>
          </div>
          
          <!-- 操作按钮区域 -->
          <div class="knowledge-actions" @click.stop>
            <el-button 
              type="primary" 
              size="small" 
              :icon="Edit"
              @click="handleEditClick(knowledge)"
              class="action-btn"
            >
              编辑
            </el-button>
            <el-button 
              type="danger" 
              size="small" 
              :icon="Delete"
              @click="deleteKnowledge(knowledge)"
              class="action-btn"
            >
              删除
            </el-button>
          </div>
        </div>
      </div>
    </section>

    <!-- 最近访问区域 -->
    <section class="recent-section">
      <div class="section-header">
        <h2 class="section-title">最近访问列表</h2>
        <div class="view-controls">
          <button 
            class="view-btn" 
            :class="{ active: viewMode === 'list' }"
            @click="viewMode = 'list'"
          >
            📋 列表
          </button>
          <button 
            class="view-btn" 
            :class="{ active: viewMode === 'grid' }"
            @click="viewMode = 'grid'"
          >
            🔲 网格
          </button>
        </div>
      </div>
      
      <div class="recent-documents" :class="viewMode">
        <div 
          v-for="document in recentDocuments" 
          :key="document.id"
          class="document-item"
          @click="openDocument(document.id)"
        >
          <div class="document-icon">
            <span class="file-icon">📄</span>
          </div>
          <div class="document-info">
            <h4 class="document-title">{{ document.name }}</h4>
            <p class="document-time">{{ document.accessTime }}</p>
          </div>
        </div>
      </div>
    </section>

    <!-- 编辑知识库对话框 -->
    <el-dialog
      v-model="editDialogVisible"
      :title="dialogTitle"
      width="500px"
      @close="onDialogClose"
    >
      <el-form :model="editForm" label-width="100px" ref="editFormRef">
        <el-form-item label="知识库名称" prop="name" :rules="[{ required: true, message: '请输入知识库名称', trigger: 'blur' }]">
          <el-input v-model="editForm.name" placeholder="请输入知识库名称"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="editDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleSaveKnowledge">
            保存
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElButton, ElMessageBox, ElMessage, ElDialog, ElForm, ElFormItem, ElInput, ElUpload } from 'element-plus'
import type { FormInstance, UploadProps } from 'element-plus'
import { Edit, Delete, Plus } from '@element-plus/icons-vue'
import { useKnowledgeStore } from '@/stores/knowledge'
import { storeToRefs } from 'pinia'
import {getUserId} from "@/utils/auth.ts";
import {useDocumentStore} from "@/stores/document.ts";
import type {GetRecentDocumentResponse} from "@/types";

// 获取最近访问文档列表
const documentStore = useDocumentStore();

const router = useRouter()
const viewMode = ref<'list' | 'grid'>('grid')
const recentDocuments = ref<Array<GetRecentDocumentResponse>>([])
const knowledgeStore = useKnowledgeStore()

const { knowledgeList } = storeToRefs(knowledgeStore)

const handleCreateClick = () => {
  dialogTitle.value = '新建知识库';
  // 重置表单
  editForm.value = { id: '', name: '' };
  editDialogVisible.value = true;
}

const openKnowledge = (id: string) => {
  router.push(`/knowledge/${id}`)
}

const dialogTitle = ref('新建知识库');
const editDialogVisible = ref(false)
const editFormRef = ref<FormInstance>()
const editForm = ref({
  id: '',
  name: '',
})

const handleEditClick = (knowledge: any) => {
  dialogTitle.value = '编辑知识库';
  editForm.value = JSON.parse(JSON.stringify(knowledge));
  editDialogVisible.value = true
}

const onDialogClose = () => {
  editFormRef.value?.resetFields()
}

const handleSaveKnowledge = async () => {
  if (!editForm.value.name) {
    ElMessage.error('请输入知识库名称');
    return;
  }

  // 根据是否有id判断是新建还是编辑
  if (editForm.value.id) {
    // 编辑
    await knowledgeStore.editKnowledge({ id: editForm.value.id, name: editForm.value.name });
    ElMessage.success('知识库编辑成功');
  } else {
    // 新建
    await knowledgeStore.createKnowledge({ name: editForm.value.name, ownerId: getUserId() || '' });
    ElMessage.success('知识库新建成功');
  }
  editDialogVisible.value = false;
}

const deleteKnowledge = async (knowledge: any) => {
  try {
    await ElMessageBox.confirm(
      `确定要删除知识库"${knowledge.name}"吗？删除后无法恢复。`,
      '删除确认',
      {
        confirmButtonText: '确定删除',
        cancelButtonText: '取消',
        type: 'warning',
      }
    )
    
    await knowledgeStore.deleteKnowledge(knowledge.id)
    
    ElMessage({
      message: `知识库"${knowledge.name}"已删除`,
      type: 'success',
    })
  } catch (error) {
    console.error('删除操作失败:', error)
    // 可以在这里加一个错误提示
  }
}

const openDocument = (id: string) => {
  // 注意：这里我们假设最近访问的文档也属于某个知识库
  // 在真实场景中，Document对象需要包含其knowledge_id
  const knowledgeId = '1'; // 模拟一个所属知识库ID
  router.push(`/knowledge/${knowledgeId}/${id}`)
}

const loadData = async () => {
  try {
    if (knowledgeList.value.length === 0) {
      await knowledgeStore.fetchKnowledgeList()
    }

    const userId = getUserId()
    if (!userId) {
      ElMessage.error('无法识别用户身份')
      return
    }
    const docs = await documentStore.fetchCurrentDocument(userId)
    recentDocuments.value = docs.map(doc => ({
      id: doc.id,
      name: doc.name,
      accessTime: doc.accessTime,
    }))
    console.log(recentDocuments.value)
  } catch (e) {
    ElMessage.error('获取最近文档失败')
    console.log(e)
  }
}

onMounted(() => {
  loadData()
})
</script>

<style scoped lang="scss">
.home-container {
  padding-left: 20px;
  padding-right: 20px;
  // max-width: 1200px;
  margin: 0 auto;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.section-title {
  font-size: 20px;
  font-weight: 600;
  margin: 0;
  color: #303133;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  
  &.btn-primary {
    background: #409eff;
    color: white;
    
    &:hover {
      background: #337ecc;
    }
  }
}

.knowledge-section {
  margin-bottom: 48px;
}

.knowledge-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}

.knowledge-card {
  background: white;
  border-radius: 8px;
  padding: 16px;
  cursor: pointer;
  transition: all 0.2s;
  border: 1px solid #ebeef5;
  position: relative;
  
  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    
    .knowledge-actions {
      opacity: 1;
      visibility: visible;
    }
  }
}

.knowledge-cover {
  width: 100%;
  height: 120px;
  object-fit: cover;
  border-radius: 6px;
  margin-bottom: 12px;
}

.knowledge-name {
  font-size: 16px;
  font-weight: 500;
  margin: 0 0 4px 0;
  color: #303133;
}

.knowledge-stats {
  font-size: 14px;
  color: #909399;
  margin: 0;
}

.view-controls {
  display: flex;
  gap: 8px;
}

.view-btn {
  padding: 6px 12px;
  border: 1px solid #dcdfe6;
  background: white;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  transition: all 0.2s;
  
  &.active {
    background: #409eff;
    color: white;
    border-color: #409eff;
  }
  
  &:hover:not(.active) {
    border-color: #409eff;
    color: #409eff;
  }
}

.recent-documents {
  &.grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
  }
  
  &.list {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
}

.document-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: white;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
  border: 1px solid #ebeef5;
  
  &:hover {
    background: #f5f7fa;
    border-color: #409eff;
  }
}

.document-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f5f7fa;
  border-radius: 6px;
  
  .file-icon {
    font-size: 20px;
  }
}

.document-title {
  font-size: 14px;
  font-weight: 500;
  margin: 0 0 4px 0;
  color: #303133;
}

.document-time {
  font-size: 12px;
  color: #909399;
  margin: 0;
}

.knowledge-actions {
  position: absolute;
  bottom: 16px;
  right: 16px;
  display: flex;
  gap: 8px;
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s ease;
  
  .action-btn {
    padding: 4px 8px;
    font-size: 12px;
  }
}

@media (max-width: 768px) {
  .section-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  
  .knowledge-grid {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  }
  
  .recent-documents.grid {
    grid-template-columns: 1fr;
  }
}

.cover-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.cover-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.cover-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}

.cover {
  width: 178px;
  height: 178px;
  display: block;
}
</style> 